Components

Docked Composer

Docked Composer is a persistent utility bar that allows a user to continually use the app to complete tasks or gather information while expanding/collapsing a composer window.

BaseBase › OpenBase › ClosedBase › PopoutBase › Composers with Overflow MenuBasedev ready

Preview

Code

<div class="slds-docked_container">
  <div role="dialog" aria-labelledby="dialog-heading-id" class="slds-docked-composer slds-grid slds-grid--vertical slds-nowrap slds-is-open">
    <header class="slds-docked-composer__header slds-grid slds-grid--align-spread slds-shrink-none">
      <div class="slds-media slds-media--center">
        <div class="slds-media__figure">
          <span class="slds-icon_container slds-icon-standard-call">
            <svg aria-hidden="true" class="slds-icon slds-icon--small">
              <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#call"></use>
            </svg>
            <span class="slds-assistive-text">Call Icon</span>
          </span>
        </div>
        <div class="slds-media__body">
          <h2 id="dialog-heading-id">Header</h2>
        </div>
      </div>
      <div class="slds-docked-composer__actions">
        <button class="slds-button slds-button--icon slds-button--icon-inverse" title="Minimize window">
          <svg aria-hidden="true" class="slds-button__icon">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#minimize_window"></use>
          </svg>
          <span class="slds-assistive-text">Minimize window</span>
        </button>
        <button class="slds-button slds-button--icon slds-button--icon-inverse" title="Expand Composer">
          <svg aria-hidden="true" class="slds-button__icon">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#expand_alt"></use>
          </svg>
          <span class="slds-assistive-text">Expand Composer</span>
        </button>
        <button class="slds-button slds-button--icon slds-button--icon-inverse" title="Close">
          <svg aria-hidden="true" class="slds-button__icon">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
          </svg>
          <span class="slds-assistive-text">Close</span>
        </button>
      </div>
    </header>
    <div class="slds-docked-composer__body slds-col slds-grid slds-grid--vertical slds-nowrap slds-size--1-of-1"></div>
    <footer class="slds-docked-composer__footer slds-shrink-none">
      <div class="slds-float--right slds-grid slds-grid--align-end slds-size--1-of-2 slds-text-align--right">
        <button class="slds-button slds-button--brand">Action</button>
      </div>
    </footer>
  </div>
</div>

VoiceVoice › QueuedVoice › RingingVoice › ConnectedVoice › CancelledVoice › BusyVoice › FailedVoice › No AnswerVoice › FinishedVoice › Incoming CallVoice › Log a CallVoicedev readyNot Compatible with S1 Mobile

Preview

Code

<div role="dialog" aria-labelledby="dialog-heading-id" class="slds-docked-composer slds-grid slds-grid--vertical slds-nowrap slds-is-open">
  <header class="slds-docked-composer__header slds-grid slds-grid--align-spread slds-shrink-none">
    <div class="slds-media slds-media--center">
      <div class="slds-media__figure">
        <span class="slds-icon_container slds-icon-standard-call">
          <svg aria-hidden="true" class="slds-icon slds-icon--small">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#call"></use>
          </svg>
          <span class="slds-assistive-text">Call Icon</span>
        </span>
      </div>
      <div class="slds-media__body">
        <h2 id="dialog-heading-id" aria-live="polite" aria-atomic="true">Lei Chan - Connecting...</h2>
      </div>
    </div>
    <div class="slds-docked-composer__actions">
      <button class="slds-button slds-button--icon slds-button--icon-inverse" title="Minimize window">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#minimize_window"></use>
        </svg>
        <span class="slds-assistive-text">Minimize window</span>
      </button>
      <button class="slds-button slds-button--icon slds-button--icon-inverse" title="Expand Composer">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#expand_alt"></use>
        </svg>
        <span class="slds-assistive-text">Expand Composer</span>
      </button>
      <button class="slds-button slds-button--icon slds-button--icon-inverse" title="Close">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
        </svg>
        <span class="slds-assistive-text">Close</span>
      </button>
    </div>
  </header>
  <div class="slds-docked-composer__body slds-col slds-grid slds-grid--vertical slds-nowrap slds-grid--align-center">
    <div class="slds-text-align--center slds-scrollable--y">
      <span class="slds-avatar slds-avatar--large">
        <img src="/assets/images/avatar2.jpg" alt="Lei Chan" />
      </span>
      <h3 class="slds-text-heading--large">Lei Chan</h3>
      <ul class="slds-list--horizontal slds-grid--align-center slds-has-dividers--right slds-text-body--small">
        <li class="slds-item">VP of Sales</li>
        <li class="slds-item ">Acme Corporation</li>
      </ul>
      <p class="slds-text-heading--medium slds-m-top--medium">Connecting...</p>
    </div>
  </div>
  <footer class="slds-docked-composer__footer slds-shrink-none">
    <button class="slds-button slds-button--destructive slds-size--1-of-1">End Call</button>
  </footer>
</div>

EmailEmailprototype

Preview

Code

Code will be available when this component reaches a Dev-Ready state.

TaskTaskdev ready

Preview

Code

<div role="dialog" aria-labelledby="dialog-heading-id" class="slds-docked-composer slds-grid slds-grid--vertical slds-nowrap slds-is-open">
  <header class="slds-docked-composer__header slds-grid slds-grid--align-spread slds-shrink-none">
    <div class="slds-media slds-media--center">
      <div class="slds-media__figure">
        <span class="slds-icon_container slds-icon-standard-task">
          <svg aria-hidden="true" class="slds-icon slds-icon--small">
            <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#task"></use>
          </svg>
          <span class="slds-assistive-text">Task Icon</span>
        </span>
      </div>
      <div class="slds-media__body">
        <h2 id="dialog-heading-id">New Task</h2>
      </div>
    </div>
    <div class="slds-docked-composer__actions">
      <button class="slds-button slds-button--icon slds-button--icon-inverse" title="Minimize window">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#minimize_window"></use>
        </svg>
        <span class="slds-assistive-text">Minimize window</span>
      </button>
      <button class="slds-button slds-button--icon slds-button--icon-inverse" title="Expand Composer">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#expand_alt"></use>
        </svg>
        <span class="slds-assistive-text">Expand Composer</span>
      </button>
      <button class="slds-button slds-button--icon slds-button--icon-inverse" title="Close">
        <svg aria-hidden="true" class="slds-button__icon">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
        </svg>
        <span class="slds-assistive-text">Close</span>
      </button>
    </div>
  </header>
  <div class="slds-docked-composer__body slds-docked-composer__body--form slds-col slds-grid slds-grid--vertical slds-nowrap">
    <fieldset class="slds-form--compound">
      <legend class="slds-assistive-text">Log new task</legend>
      <div class="slds-form-element__group">
        <div class="slds-form-element__row">
          <div class="slds-form-element">
            <label class="slds-form-element__label" for="text-input-01">Subject</label>
            <div class="slds-form-element__control">
              <input class="slds-input" type="text" id="text-input-01" />
            </div>
          </div>
        </div>
        <div class="slds-form-element__row">
          <div class="slds-form-element slds-size--1-of-2">
            <label class="slds-form-element__label" for="text-input-02">Assigned To</label>
            <div class="slds-form-element__control">
              <input class="slds-input" type="text" id="text-input-02" />
            </div>
          </div>
          <div class="slds-form-element slds-size--1-of-2">
            <label class="slds-form-element__label" for="text-input-03">Due Dates</label>
            <div class="slds-form-element__control">
              <input class="slds-input" type="text" id="text-input-03" />
            </div>
          </div>
        </div>
        <div class="slds-form-element__row">
          <div class="slds-form-element slds-lookup slds-size--1-of-2" data-select="single">
            <label class="slds-form-element__label" for="lookup-252">Name</label>
            <div class="slds-form-element__control slds-grid slds-box--border">
              <div class="slds-dropdown--trigger slds-dropdown-trigger--click slds-align-middle slds-m-left--xx-small slds-shrink-none">
                <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small">
                  <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                </svg>
                <button class="slds-button slds-button--icon slds-button--icon-small" aria-haspopup="true" title="Filter by object">
                  <svg aria-hidden="true" class="slds-button__icon">
                    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
                  </svg>
                  <span class="slds-assistive-text">Filter by object</span>
                </button>
              </div>
              <div class="slds-input-has-icon slds-input-has-icon--right slds-grow">
                <svg aria-hidden="true" class="slds-input__icon">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
                </svg>
                <input id="lookup-252" class="slds-lookup__search-input slds-input--bare" type="search" placeholder="Search Leads" aria-owns="lookup-252" role="combobox" aria-activedescendent="" aria-expanded="false" aria-autocomplete="list" />
              </div>
            </div>
            <div class="slds-lookup__menu" id="lookup-252">
              <div class="slds-lookup__item--label slds-text-body--small">Recent Accounts</div>
              <ul class="slds-lookup__list" role="listbox">
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-media slds-media--center" id="lookup-option-254" role="option">
                    <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                      <div class="slds-lookup__result-text">The Boston Consulting Group</div>
                      <span class="slds-lookup__result-meta slds-text-body--small">Account • Boston</span>
                    </div>
                  </span>
                </li>
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-media slds-media--center" id="lookup-option-255" role="option">
                    <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                      <div class="slds-lookup__result-text">Acuity</div>
                      <span class="slds-lookup__result-meta slds-text-body--small">Account • Sheboygan</span>
                    </div>
                  </span>
                </li>
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-media slds-media--center" id="lookup-option-256" role="option">
                    <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                      <div class="slds-lookup__result-text">SAS Insistute</div>
                      <span class="slds-lookup__result-meta slds-text-body--small">Account • Cary</span>
                    </div>
                  </span>
                </li>
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-media slds-media--center" id="lookup-option-257" role="option">
                    <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                      <div class="slds-lookup__result-text">Genentech</div>
                      <span class="slds-lookup__result-meta slds-text-body--small">Account • South San Francisco</span>
                    </div>
                  </span>
                </li>
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-media slds-media--center" id="lookup-option-258" role="option">
                    <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                      <div class="slds-lookup__result-text">Camden Property Trust</div>
                      <span class="slds-lookup__result-meta slds-text-body--small">Account • Houston</span>
                    </div>
                  </span>
                </li>
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-media slds-media--center" id="lookup-option-259" role="option">
                    <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                      <div class="slds-lookup__result-text">Salesforce.com, Inc.</div>
                      <span class="slds-lookup__result-meta slds-text-body--small">Account • San Francisco</span>
                    </div>
                  </span>
                </li>
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-lookup__item-action--label" id="lookup-option-260" role="option">
                    <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default">
                      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
                    </svg>
                    <span class="slds-truncate" title="{ props.text || &#x27;New Account&#x27; }">New Account</span>
                  </span>
                </li>
              </ul>
            </div>
          </div>
          <div class="slds-form-element slds-lookup slds-size--1-of-2" data-select="single">
            <label class="slds-form-element__label" for="lookup-261">Name</label>
            <div class="slds-form-element__control slds-grid slds-box--border">
              <div class="slds-dropdown--trigger slds-dropdown-trigger--click slds-align-middle slds-m-left--xx-small slds-shrink-none">
                <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small">
                  <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                </svg>
                <button class="slds-button slds-button--icon slds-button--icon-small" aria-haspopup="true" title="Filter by object">
                  <svg aria-hidden="true" class="slds-button__icon">
                    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
                  </svg>
                  <span class="slds-assistive-text">Filter by object</span>
                </button>
              </div>
              <div class="slds-input-has-icon slds-input-has-icon--right slds-grow">
                <svg aria-hidden="true" class="slds-input__icon">
                  <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
                </svg>
                <input id="lookup-261" class="slds-lookup__search-input slds-input--bare" type="search" placeholder="Search Accounts" aria-owns="lookup-261" role="combobox" aria-activedescendent="" aria-expanded="false" aria-autocomplete="list" />
              </div>
            </div>
            <div class="slds-lookup__menu" id="lookup-261">
              <div class="slds-lookup__item--label slds-text-body--small">Recent Accounts</div>
              <ul class="slds-lookup__list" role="listbox">
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-media slds-media--center" id="lookup-option-263" role="option">
                    <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                      <div class="slds-lookup__result-text">The Boston Consulting Group</div>
                      <span class="slds-lookup__result-meta slds-text-body--small">Account • Boston</span>
                    </div>
                  </span>
                </li>
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-media slds-media--center" id="lookup-option-264" role="option">
                    <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                      <div class="slds-lookup__result-text">Acuity</div>
                      <span class="slds-lookup__result-meta slds-text-body--small">Account • Sheboygan</span>
                    </div>
                  </span>
                </li>
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-media slds-media--center" id="lookup-option-265" role="option">
                    <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                      <div class="slds-lookup__result-text">SAS Insistute</div>
                      <span class="slds-lookup__result-meta slds-text-body--small">Account • Cary</span>
                    </div>
                  </span>
                </li>
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-media slds-media--center" id="lookup-option-266" role="option">
                    <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                      <div class="slds-lookup__result-text">Genentech</div>
                      <span class="slds-lookup__result-meta slds-text-body--small">Account • South San Francisco</span>
                    </div>
                  </span>
                </li>
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-media slds-media--center" id="lookup-option-267" role="option">
                    <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                      <div class="slds-lookup__result-text">Camden Property Trust</div>
                      <span class="slds-lookup__result-meta slds-text-body--small">Account • Houston</span>
                    </div>
                  </span>
                </li>
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-media slds-media--center" id="lookup-option-268" role="option">
                    <svg aria-hidden="true" class="slds-icon slds-icon-standard-account slds-icon--small slds-media__figure">
                      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
                    </svg>
                    <div class="slds-media__body">
                      <div class="slds-lookup__result-text">Salesforce.com, Inc.</div>
                      <span class="slds-lookup__result-meta slds-text-body--small">Account • San Francisco</span>
                    </div>
                  </span>
                </li>
                <li role="presentation">
                  <span class="slds-lookup__item-action slds-lookup__item-action--label" id="lookup-option-269" role="option">
                    <svg aria-hidden="true" class="slds-icon slds-icon--x-small slds-icon-text-default">
                      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#add"></use>
                    </svg>
                    <span class="slds-truncate" title="{ props.text || &#x27;New Account&#x27; }">New Account</span>
                  </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </fieldset>
  </div>
  <footer class="slds-docked-composer__footer slds-shrink-none">
    <div class="slds-float--right slds-grid slds-grid--align-end slds-size--1-of-2 slds-text-align--right">
      <button class="slds-button slds-button--brand">Save</button>
    </div>
  </footer>
</div>

Component Overview

The docked composer relies heavily on utility classes to piece together the layout so please pay close attention to the markup and classes.

The overflow menu for docked composer, .slds-docked-composer--overflow, displays when the number of docked composers exceeds the width of the viewport. The overflow pill displays with a number indicator for all hidden docked composers. A user can invoke a popover with all available docked composers and replace the furthest left docked composer with the one being selected.

When a user clicks on the "pop out" icon in the .slds-docked-composer__header, a modal displays and contains the task that was currently in the docked composer.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-docked_container
Applied to:

<div>

Outcome:

Container that is fixed to the bottom of the viewport, can contain multiple docked composers

Required:

Required

Comments:

--

.slds-docked-composer
Applied to:

<div>

Outcome:

Intializes docked composer containter window

Required:

Required

Comments:

Each docked composer window receives this class, by default the docked composer is collapsed, adding .slds-is-open expands the composer

.slds-docked-composer__header
Applied to:

<div>

Outcome:

Bar at the top of the composer that contains actionable items to invoke, such as minimizing, popping out the composer and removing the composer.

Required:

Required

Comments:

Has additional utility classes to handle layout such as .slds-grid, .slds-grid--align-spread and .slds-shrink-none

.slds-docked-composer__actions
Applied to:

<div>

Outcome:

Actionable items with .slds-docked-composer__header

Required:

Required

Comments:

--

.slds-docked-composer__body
Applied to:

<div>

Outcome:

Primary area within docked composer that contains specific task

Required:

Required

Comments:

Has additional utility classes to handle layout such as .slds-col, .slds-grid, .slds-grid--vertical, .slds-nowrap and .slds-size--1-of-1

.slds-docked-composer__footer
Applied to:

Outcome:

Bar at the bottom of the composer that contains actionable items to invoke, such as saving, associating relationships and adding content.

Required:

Required

Comments:

Has additional utility classes to handle layout such as .slds-shrink-none

.slds-docked-composer__lead
Applied to:

<div>

Outcome:

Within the docked composer body, the lead is the first region

Required:

No, optional element or modifier

Comments:

--

.slds-docked-composer__toolbar
Applied to:

<div>

Outcome:

The toolbar contains actionable items to invoke, usually rich text editor controls

Required:

No, optional element or modifier

Comments:

--

.slds-docked-composer__input
Applied to:

<textarea>

Outcome:

The text input field of the docked composer

Required:

No, optional element or modifier

Comments:

--

.slds-docked-composer--overflow
Applied to:

<div>

Outcome:

When the number of docked composer exceed the width of the viewport, this class modifies the docked composer styles

Required:

Required

Comments:

--

.slds-docked-composer__overflow-pill
Applied to:

<a>

Outcome:

An indicator that displays the number of docked composers not shown on screen, user can select to display another docked composer from this pill

Required:

Required

Comments:

--